<template>
  <div id="personal">
    <top-bar :title="title"></top-bar>
    <div class="hich_my_home_banner">
      <img src="@/assets/imgs/my_bg_icon.png" />
    </div>
    <div class="hich_my_home_ct">
      <div class="question_box">
        <div class="question_box_one" v-show="questionBoxOne">
          <h6>1/3</h6>
          <p class="question_hd">我们一起回家好几次了，相互都熟悉，就不用通过平台下单了，线下约车更简单更快捷</p>
          <p class="question_text">
            <input type="radio" name="question" value="1" class="radio" id="radio_one" @click="getNumber('1')" />
            <label class="radio" for="radio_one"></label>
            <label for="radio_one">A 对，半熟脸没关系</label>
          </p>
          <p class="question_text">
            <input type="radio" name="question" value="2" class="radio" id="radio_two" @click="getNumber('2')" />
            <label class="radio" for="radio_two"></label>
            <label for="radio_two">B 错，防人之心不可无</label>
          </p>
          <p class="question_is" v-show="questionTrue">回答正确</p>
          <p class="question_error" v-show="IsquestionError">
            回答错误
            <span>答案选B</span>
          </p>
          <p class="question_tip">您真的了解TA吗？根据公安机关统计90%的刑事案件都是半熟人作案，熟人会使您麻痹大意，使用平台开启行程录音远离纠纷，开启实时位置，让平台为您护守安全。</p>
        </div>
        <div class="question_box_one" v-show="questionBoxTwo">
          <h6>2/3</h6>
          <p class="question_hd">又见到这个人的订单了，这个家伙放过我鸽子，这次该我报仇了</p>
          <p class="question_text">
            <input type="radio" name="question" value="3" class="radio" id="radio_three" @click="getNumbers('3')" />
            <label class="radio" for="radio_three"></label>
            <label for="radio_three">A 这么做没问题</label>
          </p>
          <p class="question_text">
            <input type="radio" name="question" value="4" class="radio" id="radio_four" @click="getNumbers('4')" />
            <label class="radio" for="radio_four"></label>
            <label for="radio_four">B 完全懒得理TA,我的时间更宝贵</label>
          </p>
          <p class="question_is" v-show="questionTrueTwo">回答正确</p>
          <p class="question_error" v-show="IsquestionErrorTwo">
            回答错误
            <span>答案选A</span>
          </p>
          <p class="question_tip">您真的了解TA吗？根据公安机关统计90%的刑事案件都是半熟人作案，熟人会使您麻痹大意，使用平台开启行程录音远离纠纷，开启实时位置，让平台为您护守安全。</p>
        </div>
        <div class="question_box_one" v-show="questionBoxThree">
          <h6>3/3</h6>
          <p class="question_hd">平台提供了很多保障安全措施，显得麻烦甚至不智能，我到底是用不用</p>
          <p class="question_text" v-for="(item,index) in questioncheck" :key="index">
            <input type="checkbox" name="question" :value="item.value" class="checkbox" :id="item.forID" @click="getNumbercheckbox(item)" />
            <label class="checkbox" :for="item.forID"></label>
            <label :for="item.forID">{{item.text}}</label>
          </p>
          <p class="question_is" v-show="questionTrueThree">回答正确</p>
          <p class="question_error" v-show="IsquestionErrorThree">
            回答错误
            <span>答案选BD</span>
          </p>
          <p class="question_tip">您真的了解TA吗？根据公安机关统计90%的刑事案件都是半熟人作案，熟人会使您麻痹大意，使用平台开启行程录音远离纠纷，开启实时位置，让平台为您护守安全。</p>
        </div>
        <div class="question_bottom">
          <p class="question_ts">{{questionText}}</p>
          <p class="question_btn" v-if="questionBtn" @click="getQuestionBtn">{{questionTextBtn}}</p>
          <p class="question_btns" v-else>{{questionTextBtn}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/qrcode.svg';
import '@/assets/svgs/grzx_wdxc_icon.svg';
import '@/assets/svgs/edit_icon.svg';
import { Icon, Field, FieldItem, Toast, Dialog, Radio } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [FieldItem.name]: FieldItem,
    [Radio.name]: Radio
  },
  data() {
    return {
      title: '顺风车安全问答',
      questionText: '回答正确才能翻页',
      questionTextBtn: '下一题',
      questionTrue: '',
      IsquestionError: '',
      questionTrueTwo: '',
      IsquestionErrorTwo: '',
      questionTrueThree: '',
      IsquestionErrorThree: '',
      questionBtn: false,
      questionBoxOne: true,
      questionBoxTwo: false,
      questionBoxThree: false,
      arrList: [],
      questioncheck: [
        {
          text: 'A 我从来都是开满保命技能',
          stateType: false,
          forID: 'checkbox_one',
          value: '1'
        },
        {
          text: 'B 这些功能都打开,才能得到最大限度保障',
          stateType: false,
          forID: 'checkbox_two',
          value: '2'
        },
        {
          text: 'C 当然是安全重要,开起来',
          stateType: false,
          forID: 'checkbox_three',
          value: '3'
        },
        {
          text: 'D 安全功能都是免费的,全部都开',
          stateType: false,
          forID: 'checkbox_four',
          value: '4'
        }
      ]
    };
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    // 获取选择答案
    getNumber(val) {
      if (val === '1') {
        this.questionTrue = false;
        this.IsquestionError = true;
        this.questionBtn = false;
      } else {
        this.questionTrue = true;
        this.IsquestionError = false;
        this.questionBtn = true;
      }
    },
    getNumbers(val) {
      if (val === '3') {
        this.questionTrueTwo = true;
        this.IsquestionErrorTwo = false;
        this.questionBtn = true;
      } else {
        this.questionTrueTwo = false;
        this.IsquestionErrorTwo = true;
        this.questionBtn = false;
      }
    },
    getNumbercheckbox(item) {
      item.stateType = !item.stateType;
      if (item.stateType) {
        this.arrList.push(item.value);
      } else {
        this.removeArr(item.value);
      }
      if (this.arrList.length == 2) {
        let typeone = this.arrList.indexOf('2');
        let typetwo = this.arrList.indexOf('4');
        if (typeone != -1 && typetwo != -1) {
          this.questionTrueThree = true;
          this.IsquestionErrorThree = false;
          this.questionBtn = true;
        } else {
          this.questionTrueThree = false;
          this.IsquestionErrorThree = true;
          this.questionBtn = false;
        }
      } else {
        this.questionTrueThree = false;
        this.IsquestionErrorThree = true;
        this.questionBtn = false;
      }
    },
    queryIndexOf(number) {
      for (var i = 0; i < this.arrList.length; i++) {
        if (this.arrList[i] === number) {
          return i;
        }
      }
      return -1;
    },
    removeArr(number) {
      var index = this.queryIndexOf(number);
      if (index > -1) {
        this.arrList.splice(index, 1);
      }
    },
    // 下一步
    getQuestionBtn() {
      if (this.questionTrue) {
        this.questionBoxOne = false;
        this.questionBoxTwo = true;
        this.questionTrue = '';
        this.IsquestionError = '';
        this.questionBtn = false;
      }
      if (this.questionTrueTwo) {
        this.questionBoxOne = false;
        this.questionBoxTwo = false;
        this.questionBoxThree = true;
        this.questionTrueTwo = '';
        this.IsquestionErrorTwo = '';
        this.questionBtn = false;
        this.questionText = '回答正确才能完成';
        this.questionTextBtn = '完成测验';
      }
      if (this.questionTrueThree) {
        // 全部完成测验
        Loading.show();
        http.post('/pakj/hitchUser/updateFAQSecurity').then(res => {
          Loading.hide();
          if (res.data.code === '000000') {
            Dialog.confirm({
              content: '答题已完成',
              confirmText: '确定',
              onConfirm: () => {
                this.$router.push({
                  name: 'hitchhikeSafetyCenter',
                  query: {
                    userid: this.$route.query.userid,
                    type: this.$route.query.type
                  }
                });
              }
            });
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#personal {
  height: 100vh;
  background-color: color-primary-background;
}

.hich_my_home_banner {
  height: 380px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
}

.hich_my_home_banner img {
  width: 100%;
}

.hich_my_home_ct {
  width: 90%;
  margin: 0px 5%;
  position: absolute;
  top: 200px;
  left: 0px;
  z-index: 6;
}

.question_box {
  width: 670px;
  height: 920px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  position: relative;
}

.question_box_one {
  padding: 38px 40px 0px 40px;
}

.question_box_one h6 {
  font-size: 40px;
  color: #333;
}

.question_hd {
  font-size: 30px;
  color: #333;
  margin-top: 50px;
}

.question_text {
  font-size: 30px;
  color: #333;
  margin-top: 30px;
}

.question_is {
  font-size: 30px;
  color: #0AA436;
  margin-top: 36px;
}

.question_error {
  font-size: 30px;
  color: #C91818;
  margin-top: 36px;
}

.question_error span {
  font-size: 30px;
  color: #666;
  float: right;
}

.question_tip {
  font-size: 24px;
  color: #666;
  margin-top: 20px;
}

.question_bottom {
  position: absolute;
  bottom: 40px;
  width: 90%;
  margin: 0px 5%;
}

.question_ts {
  font-size: 22px;
  color: #999;
  text-align: center;
  margin-top: 20px;
}

.question_btn {
  width: 100%;
  height: 88px;
  background: rgba(255, 105, 23, 1);
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 36px;
  line-height: 88px;
  margin-top: 20px;
}

.question_btns {
  width: 100%;
  height: 88px;
  background: rgba(253, 202, 174, 1);
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 36px;
  line-height: 88px;
  margin-top: 20px;
}

.question_text input[type='radio'].radio {
  opacity: 0;
  display: inline-block;
  position: relative;
  top: 4px;
  left: 0px;
  z-index: 10;
  cursor: pointer;
}

.question_text label.radio {
  background: url('../../../assets/imgs/check_tip.png') no-repeat;
  width: 36px;
  height: 36px;
  display: inline-block;
  position: relative;
  top: 10px;
  right: 35px;
  background-size: contain;
}

.question_text input[type='radio'].radio:checked+.radio {
  background: url('../../../assets/imgs/check_tip1.png') no-repeat;
  height: 36px;
  width: 36px;
  background-size: contain;
}

.question_text input[type='checkbox'].checkbox {
  opacity: 0;
  display: inline-block;
  position: relative;
  top: 4px;
  left: 0px;
  z-index: 10;
  cursor: pointer;
}

.question_text label.checkbox {
  background: url('../../../assets/imgs/check_tip.png') no-repeat;
  width: 36px;
  height: 36px;
  display: inline-block;
  position: relative;
  top: 10px;
  right: 35px;
  background-size: contain;
}

.question_text input[type='checkbox'].checkbox:checked+.checkbox {
  background: url('../../../assets/imgs/check_tip1.png') no-repeat;
  height: 36px;
  width: 36px;
  background-size: contain;
}
</style>
